<template>
 <div class="banner">
  <el-carousel :interval="500000" arrow="always" style="width:982px;margin:0 auto">
    <el-carousel-item v-for="(key, item) in 9" :key="item" style="height:300px">
      <!-- <h3>{{  }}</h3> -->
      <!-- <img src="@/assets/images/lunbotured.jpg" alt=""> -->
     
    
        <div class="lunbotu_main" @click="toLyric(banner[item].targetId)">
          <div class="tutu">
            <img
              v-if="item == 0" :src="banner[0].imageUrl"  alt="" class="lunbotuimg"
            />
            <img
              v-if="item == 1"
              :src="banner[1].imageUrl"
              alt=""
              class="lunbotuimg"
            />
            <img
              v-if="item == 2"
              :src="banner[2].imageUrl"
              alt=""
              class="lunbotuimg"
            />
            <img
              v-if="item == 3"
              :src="banner[3].imageUrl"
              alt=""
              class="lunbotuimg"
            />
            <img
              v-if="item == 4"
              :src="banner[4].imageUrl"
              alt=""
              class="lunbotuimg"
            />
            <img
              v-if="item == 5"
              :src="banner[5].imageUrl"
              alt=""
              class="lunbotuimg"
            />
            <img
              v-if="item == 6"
              :src="banner[6].imageUrl"
              alt=""
              class="lunbotuimg"
            />
            <img
              v-if="item == 7"
              :src="banner[7].imageUrl"
              alt=""
              class="lunbotuimg"
            />
            <img
              v-if="item == 8"
              :src="banner[8].imageUrl"
              alt=""
              class="lunbotuimg"
            />
            <img
              v-if="item == 9"
              :src="banner[9].imageUrl"
              alt=""
              class="lunbotuimg"
            />

          </div>
          <div style="height: 300px; float: left;width:250px;" class="road">
            <!-- <img src="@/assets/images/lunbotuside.png" alt="" style="height:300px;width:300px" / > -->
          </div>
        </div>
    
     
    </el-carousel-item>
  </el-carousel>
  </div>
</template>
<script>
import axios from "axios";
export default {
  name: "lunbotu",
  data() {
    return {
      banner: [],
    };
  },
  created() {
    axios({
      url: "http://localhost:3000/banner",
      methods: "get",
      params: {
        type: 0,
      },
    }).then((res) => {
      this.banner = res.data.banners;
    });
  },
};
</script>

<style>
/* .el-carousel{
      height: 285px;
  }
  .el-carousel-item{
      height: 100%;
  } */
  .road {
    background-image: url(../../../assets/images/lunbotuside.png);
  }
  
  .tutu {
    float: left;
    width: 730px;
  height: 300px;
  }
  .banner {
    width: 100%;
    height: 300px;

  }
.el-carousel {
  height: 300px;
  
}
.el-carousel__container {
  height: 300px;
}
.lunbotu_main {
  width: 1100px;
  height: 100%;
  /* position: absolute;
  left: 24.5%; */
  margin: 0 auto;

}
.lunbotuimg {
  width: 100%;
  height: 300px;
  float: left;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-of-type(2n+1) {
  background-color: rgb(223, 91, 78);
  /* background-image: url(@/assets/images/lunbotured.jpg); */
}
.el-carousel__item:nth-of-type(2) {
  background-color: rgb(128, 217, 196);
}
.el-carousel__item:nth-of-type(3) {
  background-color: rgb(84, 66, 46);
}
.el-carousel__item:nth-of-type(4) {
  background-color: black;
}
</style>